<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <link rel="stylesheet/less" href="./style/py-carousel.less" />
    <script src="https://cdn.jsdelivr.net/npm/less@4"></script>
  </head>
  <body>
    <div class="py-carousel">
      <!-- 图片列表 -->
      <div class="carousel-imgs">
        <div class="item"><img src="./images/pic_1.webp" alt="" /></div>
        <div class="item"><img src="./images/pic_2.webp" alt="" /></div>
        <div class="item"><img src="./images/pic_3.webp" alt="" /></div>
        <div class="item"><img src="./images/pic_4.webp" alt="" /></div>
        <div class="item"><img src="./images/pic_5.webp" alt="" /></div>
      </div>

      <!-- 指示器列表 -->
      <div class="carousel-indicators">
        <div class="item active">图片1</div>
        <div class="item">图片2</div>
        <div class="item">图片3</div>
        <div class="item">图片4</div>
        <div class="item">图片5</div>
      </div>
    </div>

    <script>
      const carouselEl = document.querySelector('.py-carousel')
      const imgEls = carouselEl.querySelectorAll('.carousel-imgs .item')
      const indicatorsEl = carouselEl.querySelector('.carousel-indicators')
      let indicatorArr = Array.from(indicatorsEl.children)
      let store = {
        previousIndex: 0, // 上一个显示的图片索引
        currentIndex: 0, // 当前显示的图片索引
      }
      let timerId = null // 自动轮播的定时器

      // 当鼠标经过显示区域时，取消自动轮播
      carouselEl.addEventListener('mouseenter', function (event) {
        clearInterval(timerId)
      })

      // 当鼠标离开显示区域时，恢复自动轮播
      carouselEl.addEventListener('mouseleave', function (event) {
        autoScroll()
      })

      indicatorsEl.addEventListener('mouseover', function (event) {
        store.previousIndex = store.currentIndex
        store.currentIndex = indicatorArr.findIndex(function (item) {
          return item === event.target
        })

        switchIndicator()
        switchImg()
      })

      // 切换图片
      function switchImg() {
        // 每次索引改变后，都要循环设置图片的偏移位置。规则是：当前索引的图片不偏移，在中间；比当前索引小的在左边；比当前索引大的在右边。
        // 设置图片偏移时，只有上一个图片和当前图片有动画效果。
        for (let i = 0; i < imgEls.length; i++) {
          let item = imgEls[i]

          if (i !== store.previousIndex) {
            item.style.transition = 'none'
          }

          if (i === store.currentIndex) {
            item.style.transition = 'left .5s'
            item.style.left = 0
          } else if (i < store.currentIndex) {
            item.style.left = '-100%'
          } else {
            item.style.left = '100%'
          }
        }
      }

      // 切换指示器
      function switchIndicator() {
        indicatorsEl.children[store.previousIndex].classList.remove('active')
        indicatorsEl.children[store.currentIndex].classList.add('active')
      }

      // 自动轮播
      function autoScroll() {
        timerId = setInterval(function () {
          var newIndex = store.currentIndex + 1
          store.previousIndex = store.currentIndex

          store.currentIndex++

          if (store.currentIndex === imgEls.length) {
            store.currentIndex = 0
          }

          switchIndicator()
          switchImg()
        }, 3000)
      }

      // 默认自动轮播
      autoScroll()
    </script>
  </body>
</html>
